<template>
  <a-modal :open="open" width="1100px" title="选择药品" centered @ok="onOk" @cancel="onCancel">
    <SearchContainer @search="getData" @reset="onReset">
      <a-form ref="formRef" :model="formState" layout="inline" :label-col="{ style: { width: 'auto' } }">
        <a-form-item label="入库日期" name="dateRange">
          <a-range-picker v-model:value="formState.dateRange" class="w-56" value-format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item label="">
          <a-input v-model:value="formState.rkdh" class="w-56" placeholder="入库单号/药品名称" />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <div class="flex justify-between items-end w-full mt-4">
      <div>已选择{{ selectedRowKeys.length }}项</div>
    </div>
    <BaseTable
      class="mt-4 mb-8 h-[400px] detail-table"
      column-code="00001092"
      :data-source="tableData"
      :pagination="pagination"
      :loading="loading"
      row-key="lsh"
      :scroll="{ x: 1200, y: 320 }"
      :row-selection="{ selectedRowKeys, onChange: onSelectChange, getCheckboxProps: (record) => ({ disabled: dataKeys.includes(record.lsh) }) }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'yxq'">{{ dayjs(record.yxq).format('YYYY-MM-DD') }}</template>
        <template v-if="column.dataIndex === 'ypmc'"> <MedicineInfo :value="{ mc: record?.ypmc, gg: record?.gg, cj: record?.cj }" /> </template>
      </template>
    </BaseTable>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import dayjs from 'dayjs'

const emit = defineEmits(['update:open', 'ok'])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  dataSource: {
    type: Array,
    default: () => []
  },
  thckbh: {
    type: String,
    default: null
  },
  gysbh: {
    type: String,
    default: null
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
})
const selectedRows = ref([])
const selectedRowKeys = ref([])
const formState = ref({
  dateRange: [dayjs(new Date().setDate(new Date().getDate() - 10)).format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
  rkdh: ''
})

const formRef = ref(null)

const onCancel = () => {
  emit('update:open', false)
}
const dataKeys = ref([])
const { pagination, loading, tableData, getData } = useTable({
  url: '/drugStorage/psiform/getWarehousingDetailList',
  params: formState.value,
  formatParams: (params) => {
    return {
      ...params,
      thckbh: props.thckbh,
      gysbh: props.gysbh,
      status: 1
    }
  }
})
const onSelectChange = (keys, rows) => {
  selectedRowKeys.value = keys
  selectedRows.value = rows
}
watch(
  () => props.open,
  (val) => {
    if (val) {
      getData()
      dataKeys.value = props.dataSource.map((item) => item.rklsh)
    } else {
      selectedRowKeys.value = []
      selectedRows.value = []
    }
  }
)

const onOk = async () => {
  emit('update:open', false)
  if (selectedRows.value.length) {
    emit('ok', selectedRows.value)
  }
}
const onReset = () => {
  selectedRows.value = []
  selectedRowKeys.value = []
  formRef.value.resetFields()
  getData()
}
</script>
<style lang="less" scoped>
.detail-table {
  :deep(.ant-table) {
    .ant-table-body {
      height: 320px;
    }
    .ant-table-placeholder {
      height: 308px !important;
    }
    .ant-checkbox-disabled {
      .ant-checkbox-inner:after {
        position: absolute;
        top: 50%;
        display: table;
        box-sizing: border-box;
        width: 5px;
        height: 9px;
        border: 2px solid var(--disabled-text-color);
        border-top: 0;
        transform: rotate(45deg) scale(1) translate(-50%, -50%);
        opacity: 1;
        transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
        content: '';
        inset-inline-start: 21.5%;
        border-inline-start: 0;
      }
    }
  }
}
</style>
